<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">  <!-- Use Chrome Frame in IE -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="description" content="Interactive 3D Tiles styling.">
    <meta name="cesium-sandcastle-labels" content="Showcases, 3D Tiles">
    <title>Cesium Demo</title>
    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script type="text/javascript" src="../../../Build/CesiumUnminified/Cesium.js" nomodule></script>
    <script type="module" src="../load-cesium-es6.js"></script>
</head>
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
<style>
    @import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
    'use strict';
//Sandcastle_Begin
// A demo of interactive 3D Tiles styling
// Styling language Documentation: https://github.com/CesiumGS/3d-tiles/tree/master/specification/Styling
// Building data courtesy of NYC OpenData portal: http://www1.nyc.gov/site/doitt/initiatives/3d-building.page
var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain()
});

viewer.scene.globe.depthTestAgainstTerrain = true;

// Set the initial camera view to look at Manhattan
var initialPosition = Cesium.Cartesian3.fromDegrees(-74.01881302800248, 40.69114333714821, 753);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(21.27879878293835, -21.34390550872461, 0.0716951918898415);
viewer.scene.camera.setView({
    destination: initialPosition,
    orientation: initialOrientation,
    endTransform: Cesium.Matrix4.IDENTITY
});

// Load the NYC buildings tileset.
var tileset = new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(75343) });
viewer.scene.primitives.add(tileset);

// Color buildings based on their height.
function colorByHeight() {
    tileset.style = new Cesium.Cesium3DTileStyle({
        color: {
            conditions: [
                ['${Height} >= 300', 'rgba(45, 0, 75, 0.5)'],
                ['${Height} >= 200', 'rgb(102, 71, 151)'],
                ['${Height} >= 100', 'rgb(170, 162, 204)'],
                ['${Height} >= 50', 'rgb(224, 226, 238)'],
                ['${Height} >= 25', 'rgb(252, 230, 200)'],
                ['${Height} >= 10', 'rgb(248, 176, 87)'],
                ['${Height} >= 5', 'rgb(198, 106, 11)'],
                ['true', 'rgb(127, 59, 8)']
            ]
        }
    });
}

// Color buildings by their latitude coordinate.
function colorByLatitude() {
    tileset.style = new Cesium.Cesium3DTileStyle({
        defines: {
            latitudeRadians: 'radians(${Latitude})'
        },
        color: {
            conditions: [
                ['${latitudeRadians} >= 0.7125', "color('purple')"],
                ['${latitudeRadians} >= 0.712', "color('red')"],
                ['${latitudeRadians} >= 0.7115', "color('orange')"],
                ['${latitudeRadians} >= 0.711', "color('yellow')"],
                ['${latitudeRadians} >= 0.7105', "color('lime')"],
                ['${latitudeRadians} >= 0.710', "color('cyan')"],
                ['true', "color('blue')"]
            ]
        }
    });
}

// Color buildings by distance from a landmark.
function colorByDistance() {
    tileset.style = new Cesium.Cesium3DTileStyle({
        defines : {
            distance : 'distance(vec2(radians(${Longitude}), radians(${Latitude})), vec2(-1.291777521, 0.7105706624))'
        },
        color : {
            conditions : [
                ['${distance} > 0.0012',"color('gray')"],
                ['${distance} > 0.0008', "mix(color('yellow'), color('red'), (${distance} - 0.008) / 0.0004)"],
                ['${distance} > 0.0004', "mix(color('green'), color('yellow'), (${distance} - 0.0004) / 0.0004)"],
                ['${distance} < 0.00001', "color('white')"],
                ['true', "mix(color('blue'), color('green'), ${distance} / 0.0004)"]
            ]
        }
    });
}

// Color buildings with a '3' in their BIN property.
function colorByStringRegex() {
    tileset.style = new Cesium.Cesium3DTileStyle({
        color : "(regExp('3').test(String(${BIN}))) ? color('cyan', 0.9) : color('purple', 0.1)"
    });
}

// Show only buildings greater than 200 meters in height.
function hideByHeight() {
    tileset.style = new Cesium.Cesium3DTileStyle({
        show : '${Height} > 200'
    });
}

Sandcastle.addToolbarMenu([{
    text : 'Color By Height',
    onselect : function() {
        colorByHeight();
    }
}, {
    text : 'Color By Latitude',
    onselect : function() {
        colorByLatitude();
    }
}, {
    text : 'Color By Distance',
    onselect : function() {
        colorByDistance();
    }
}, {
    text : 'Color By Name Regex',
    onselect : function() {
        colorByStringRegex();
    }
}, {
    text : 'Hide By Height',
    onselect : function() {
        hideByHeight();
    }
}]);

colorByHeight();

//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== 'undefined') {
    window.startupCalled = true;
    startup(Cesium);
}
</script>
</body>
</html>
